﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="ReadOnly">
    <h2><DemoNavLink Link="ComboBox#ReadOnly" />ComboBox - Read-Only Mode</h2>
    <p>
        In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2">ComboBox</a> displays values but does not allow users to change them.
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.ReadOnly">ReadOnly</a> property to <b>true</b> to activate read-only mode.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="The value cannot be changed" />
    </div>
    <div class="card-body mw-480">
        <DxComboBox Data="@CountryCity.Countries"
                    @bind-Value="@CurrentCountry"
                    TextFieldName="@nameof(Country.CountryName)"
                    ReadOnly="true"
                    SizeMode="SizeMode" />
    </div>
</div>

<CodeSnippet_Editor_ComboBox_ReadOnly></CodeSnippet_Editor_ComboBox_ReadOnly>

@code {
    Country CurrentCountry { get; set; } = CountryCity.Countries[1];
}
